<template>
  <div>
    <div class="userinfo" v-if="users">
      <div class="img">
        <div class="img_info">
          <img :src="users.backgroundUrl" />
        </div>
        <div class="button">
          <span
            class="iconfont icon-fanhui"
            @click="$router.push('/recommend')"
          ></span>
          <span class="iconfont con-sandian"></span>
        </div>
      </div>
      <div class="user">
        <div class="headPortrait">
          <img :src="users.avatarUrl" />
        </div>
        <div class="user_test">
          <h2>{{ users.nickname }}</h2>
          <p class="user_information">
            {{ users.follows }}关注<span>|</span
            >{{ users.followeds }}粉丝<span>|</span>Lv.{{ lv }}
          </p>
          <p class="user_resume">点击添加个人简历</p>
        </div>
      </div>
      <div class="user_box">
        <h3>基本信息</h3>
        <p>村龄：{{ time }}</p>
        <p>年龄：00后 魔蝎座</p>
        <p>地区：海外 阿尔及利亚</p>
        <div class="all">
          <p>查看全部 ></p>
        </div>
      </div>
      <div class="music_box">
        <h3>音乐品味</h3>
        <p>
          听歌排行榜 <br /><span>累计听歌：{{ listenSongs }}首</span>
        </p>
        <p>我喜欢的音乐<br /><span>103首，播放次数：1178次</span></p>
      </div>
      <div class="songSheet_box">
        <h3>收藏歌单<span>({{ playlist.length }}个)</span></h3>
        <!-- <div class="songSheet_img" v-for="(item,index) in playlist"  :key="index"> -->
          <router-link class="songSheet_img" v-for="(item,index) in playlist"  :key="index" tag="div" :to="'/rank/ranklist?id='+item.id">
          <div class="imgs">
            <img
              :src="item.coverImgUrl"
              width="45px"
              height="45px"
            />
          </div>
          <div class="songSheet_test">
            <p>{{ item.name }}</p>
            <span>{{ item.trackCount }}首</span>
          </div>
          </router-link>
        <!-- </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getUserinfo, getplaylist } from "../api/userinfo";
export default {
  data() {
    return {
      users: null,
      lv: null,
      time: null,
      listenSongs: "",
      playlist: [],
    };
  },
  created() {
    // console.log(localStorage.getItem("uid"));
    let userId = localStorage.getItem("uid");
    getUserinfo({ uid: userId }).then((item) => {
      // console.log(item);
      this.lv = item.level;
      this.users = item.profile;
      this.listenSongs = item.listenSongs;
      let year = new Date(item.createTime).getFullYear();
      let newYear = new Date().getFullYear();
      let moth = new Date(item.createTime).getMonth();
      let num = newYear - year;
      this.time = `${num}年(${year}年${(moth =
        moth > 10 ? moth + 1 : "0" + (moth + 1))}月注册) `;
    });
    getplaylist({ uid: userId }).then((item) => {
      // console.log(item);
      this.playlist = item.playlist;
    });
  }
};
</script>

<style lang="less">
.userinfo {
  width: 100vw;
  position: relative;
  background-color: #f2f3f4;
  padding-bottom: 10px;
  .img {
    display: flex;
    height: 37vh;
    overflow: hidden;
    img {
      flex: 1;
      width: 100vw;
    }
    .button {
      display: flex;
      width: 100vw;
      position: absolute;
      top: 0;
      justify-content: space-between;
      span {
        font-size: 18 px;
        color: #fff;
        padding: 10px 15px;
      }
    }
  }
  .user {
    width: 90%;
    position: absolute;
    top: 32vh;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #fff !important;
    border-radius: 10px;
    text-align: center;
    .headPortrait {
      position: absolute;
      img {
        width: 27vw;
        height: 15vh;
        position: absolute;
        border-radius: 50%;
        top: -50px;
        left: calc(50vw - 15vw);
      }
    }
    .user_test {
      margin-top: 8vh;
      padding-bottom: 15px;
      .user_information {
        font-size: 14px;
        padding: 5px 0;
        span {
          padding: 0 5px;
        }
      }
      .user_resume {
        font-size: 12px;
        color: #999;
      }
    }
  }
  .user_box {
    margin-top: 20vh;
    margin-left: 5%;
    width: 90%;
    border-radius: 10px;
    background-color: #fff;
    h3 {
      padding: 10px 20px;
    }
    p {
      padding: 10px 20px;
      font-size: 14px;
      color: #999;
    }
    .all {
      border-top: 1px solid #f4f4f4;
      P {
        text-align: center;
        font-size: 12px;
      }
    }
  }
  .music_box {
    width: 90%;
    border-radius: 10px;
    background-color: #fff;
    margin: 20px auto;
    h3 {
      padding: 10px 0 10px 10px;
    }
    p {
      padding: 10px 0 10px 20px;
      span {
        font-size: 14px;
        color: #999;
      }
    }
  }
  .songSheet_box {
    width: 90%;
    border-radius: 10px;
    background-color: #fff;
    margin: 20px auto;
    padding-bottom: 10px;
    h3 {
      padding: 10px 0 10px 10px;
      span {
          color: #999;
          font-size: 14px;
          padding-left: 5px;
        }
    }
    .songSheet_img {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .imgs {
        padding-left: 20px;
        img {
          flex: 0;
          width: 45px;
          height: 45px;
        }
      }
      .songSheet_test {
        padding-left: 10px;
        span {
          color: #999;
          font-size: 12px;
        }
      }
    }
  }
}
</style>